<template>
  <div style="height: 1000px;">
    分页
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change="numChange"
      :page-size.sync="page.pageSize"
      :current-page.sync="page.pageNum"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'user-list',
  data () {
    return {
      page: {
        pageSize: 20,
        pageNum: 1,
        total: 1000
      },
      tempArr: [
        {id: 1, name: '张三', sex: 1},
        {id: 2, name: '李四', sex: 2},
        {id: 3, name: '王五', sex: 0},
        {id: 4, name: '赵六', sex: 2},
        {id: 5, name: '王二', sex: 2},
        {id: 6, name: '老刘', sex: 1},
        {id: 7, name: '老城', sex: 0}
      ]
    }
  },
  methods: {
    sizeChange (val) {
      console.log(val, 'size', this.page.pageSize)
    },
    numChange (val) {
      console.log(val, 'num', this.page.pageNum)
    }
  },
  created () {
    this.tempArr.forEach(item => {
      switch (item.sex) {
        case 1:
          item.sex = '男'
          break
        case 2:
          item.sex = '女'
          break
        case 0:
          item.sex = '未知'
          break
      }
    })
    console.log(this.tempArr)
  }
}
</script>

<style scoped>

</style>
